let myChart = echarts.init(document.getElementById('map'))

myChart.showLoading();

$.get('../data/china.json', function (geoJson) {

  myChart.hideLoading();

  echarts.registerMap('china', geoJson);

  myChart.setOption({
    // title: {
    //   text: '攻击总量',
    //   subtext: 'Total attack',
    // },
    tooltip: {
      trigger: 'item',
      formatter: '{b}<br/>{c} (p / km2)'
    },
    grid: {
      left: 0,
      right: 0,
      top: 0,
      bottom: 0
    },
    toolbox: {
      show: true,
      orient: 'vertical',
      left: 'right',
      top: 'center',
      feature: {
        dataView: {readOnly: false},
        restore: {},
        saveAsImage: {}
      }
    },
    // visualMap: {
    //   min: 800,
    //   max: 50000,
    //   text:['High','Low'],
    //   realtime: false,
    //   calculable: true,
    //   inRange: {
    //     color: ['#192756','#962148']
    //   }
    // },
    series: [
      {
        name: '',
        type: 'map',
        mapType: 'china',
        data: [{name: '江苏', selected: true}],
        shading: 'lambert',
        realisticMaterial: {
          roughness: 0.2,
          metalness: 0
        },
        postEffect: {
          enable: true,
          SSAO: {
            enable: true,
            radius: 2,
            intensity: 1
          }
        },
        groundPlane: {
          show: true
        },
        light: {
          main: {
            intensity: 2,
            shadow: true,
            shadowQuality: 'high',
            alpha: 30
          },
          ambient: {
            intensity: 0
          },
          ambientCubemap: {
            // texture: '/asset/get/s/data-1491896094618-H1DmP-5px.hdr',
            exposure: 1,
            diffuseIntensity: 1
          }
        },
        viewControl: {
          distance: 50
        },
        itemStyle: {
          normal: {
            label: {
              show: true
            },
            areaColor: '#192756',
            borderColor: '#000',
            borderWidth: 1,
          },
          emphasis: {
            label: {
              show: true
            },
            shadowColor: '#962148',
            shadowBlur: 10,
            shadowOffsetX: -5,
            shadowOffsetY: 3,
            areaColor: '#962148'
          }
        },
      }
    ]
  });
});

/*全网安全态势分数图表*/
let scoreChart = echarts.init(document.getElementById('score-chart'))
let scoreChartOption = {
  radar: [
    {
      indicator: [
        {text: '人员行为指数', max: 200},
        {text: '威胁性指数', max: 200},
        {text: '脆弱性指数', max: 200},
        {text: '服务状态指数', max: 200},
        {text: '设备行为指数', max: 200}
      ],
      radius: 125,
      center: ['50%', '50%'],
      name: {
        color: '#d4d4d5'
      },
      axisLine: {
        lineStyle: {
          type: 'dotted',
          color: ['#344dba']
        }
      },
      splitLine: {
        lineStyle: {
          type: 'dotted',
          color: '#3751c4'
        }
      },
      splitArea: {
        areaStyle: {
          color: ['rgba(255,255,255,0)']
        }
      }
    },
  ],
  grid: {
    left: 0,
    right: 0,
    top: 50,
    bottom: 20
  },
  series: [
    {
      type: 'radar',
      tooltip: {
        trigger: 'item'
      },
      symbolSize: 0,
      lineStyle: {
        normal: {
          color: '#405ee2'
        }
      },
      areaStyle: {
        normal: {
          color: '#233b79'
        }
      },
      data: [
        {
          value: [150, 80, 76, 176, 100]
        }
      ]
    }
  ]
};
scoreChart.setOption(scoreChartOption);

/*攻击源图表*/
let attackChart = echarts.init(document.getElementById('attack-chart'))

function getattackChartArr() {
  let attackChartArr = []
  for (let i = 0; i < 5; i++) {
    attackChartArr.push(selectfrom(200, 2000))
  }
  return attackChartArr;
}

let attackChartOption = {
  grid: {
    left: 60,
    right: 50,
    top: 20,
    bottom: 0
  },
  xAxis: {
    type: 'value',
    name: '投诉事件数（百）',
    nameLocation: 'middle',
    nameGap: 30,
    nameTextStyle: {
      color: '#d4d4d5'
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: ['#242941']
      }
    },
    axisLabel: {
      color: '#fff',
      fontSize: 14
    },
    axisLine: {
      lineStyle: {
        color: '#242941'
      }
    },
  },
  yAxis: {
    type: 'category',
    data: ['湖南', '福建', '上海', '北京', '江苏'],
    axisTick: {
      alignWithLabel: true
    },
    axisLabel: {
      color: '#d4d4d5',
      fontSize: 14,
      // align:'left'
      margin: 30
    },
    axisLine: {
      lineStyle: {
        color: '#242941'
      }
    }
  },
  series: [
    {
      type: 'bar',
      barWidth: 8,
      itemStyle: {
        normal: {
          color: '#12193e',
          barBorderRadius: 4,
        }
      },
      barGap: '-100%',
      data: [2000, 2000, 2000, 2000, 2000],
      animation: false
    },
    {
      name: '',
      type: 'bar',
      barWidth: 8,
      axisLine: {
        lineStyle: {
          color: '#42494d',
        }
      },
      data: getattackChartArr(),
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0, 0, 1, 0,
            [
              {offset: 0, color: '#1c5fc2'},
              {offset: 0.5, color: '#2d88d3'},
              {offset: 1, color: '#56ebfe'}
            ]
          ),
          barBorderRadius: 4,
        }
      },
      animation: true,
      animationDuration:2000
    }
  ]
};
attackChart.setOption(attackChartOption)

/*被攻击源图表*/
let attackedChart = echarts.init(document.getElementById('attacked-chart'))

function getattackedChartArr() {
  let attackedChartArr = []
  for (let i = 0; i < 5; i++) {
    attackedChartArr.push(selectfrom(200, 2000))
  }
  return attackedChartArr;
}

let attackedChartOption = {
  grid: {
    left: 60,
    right: 0,
    top: 20,
    bottom: 0
  },
  xAxis: {
    type: 'value',
    name: '投诉事件数（百）',
    nameLocation: 'middle',
    nameGap: 30,
    nameTextStyle: {
      color: '#d4d4d5'
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: ['#242941']
      }
    },
    axisLabel: {
      color: '#fff',
      fontSize: 14
    },
    axisLine: {
      lineStyle: {
        color: '#242941'
      }
    },
  },
  yAxis: {
    type: 'category',
    data: ['湖南', '福建', '上海', '北京', '江苏'],
    axisTick: {
      alignWithLabel: true
    },
    axisLabel: {
      color: '#d4d4d5',
      fontSize: 14,
      // align:'left'
      margin: 30
    },
    axisLine: {
      lineStyle: {
        color: '#242941'
      }
    }
  },
  series: [
    {
      type: 'bar',
      barWidth: 8,
      itemStyle: {
        normal: {
          color: '#12193e',
          barBorderRadius: 4,
        }
      },
      barGap: '-100%',
      data: [2000, 2000, 2000, 2000, 2000],
      animation: false
    },
    {
      name: '',
      type: 'bar',
      barWidth: 8,
      axisLine: {
        lineStyle: {
          color: '#42494d',
          fontSize: 14
        }
      },
      // label: {
      //   normal: {
      //     show: false
      //   }
      // },
      data: getattackedChartArr(),
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0, 0, 1, 0,
            [
              {offset: 0, color: '#c45802'},
              {offset: 0.5, color: '#be9002'},
              {offset: 1, color: '#bebe01'}
            ]
          ),
          barBorderRadius: 4
        }
      },
      animation: true,
      animationDuration:2000
    }
  ]
};
attackedChart.setOption(attackedChartOption)


// 滚动条

var scroll = function ($el) {
  let body = $el.find('.m-body');//内容高度
  let cont = $el.find(".m-cont");//框高度

  let scrollbar = $el.find('.scrollbar')//滚动区域高度
  let bar = $el.find('.scrollbar > div')//滚动块的高度

  let $layout = $el.find('.m-layout')
  let s
  let lasts = 0
  let barrotatio
  let timer
  let n = 0
  ani()

  function ani() {
    timer = setInterval(() => {
      let sh = scrollbar.height() - bar.height()
      bar.css('top', `${n++}px`)
      if (n > sh)
        n = 0
      barrotatio = (n) / (scrollbar.height() - bar.height())
      bal(barrotatio)
    }, 100)
  }

  $el.find('.m-table').mouseenter(() => {
    window.clearInterval(timer)
  })
  $el.find('.m-table').mouseleave(() => {
    ani()
  })
  let y
  let flag
  bar.mousedown(function (ev) {
    flag = true
    y = ev.clientY
  })
  $layout.mousemove(function (ev) {
    if (flag) {
      s = ev.clientY - y
      n = s + lasts
      if (n < 0) {
        n = 0
      } else if (n > scrollbar.height() - bar.height()) {
        n = scrollbar.height() - bar.height()
      }
      bar.css('top', `${n}px`)
      barrotatio = (n) / (scrollbar.height() - bar.height())
      bal(barrotatio)
    }
  })

  function bal(i) {
    let smallHeight = body.height();
    let bigHeight = cont.height();
    let range = Math.floor((bigHeight - smallHeight) * i)
    body.scrollTop(range)
  }

  $layout.mouseup(function () {
    lasts += s
    flag = false
  })
  cont.on('mousewheel', function (e) {
    var d = e.originalEvent.deltaY;
    var st = bar[0].offsetTop;
    if (d > 0) {
      let n = st + 10
      if (n > (scrollbar.height() - bar.height())) {
        n = scrollbar.height() - bar.height()
      }
      lasts = n
      bar.css('top', `${n}px`)
      barrotatio = (n) / (scrollbar.height() - bar.height())
      bal(barrotatio)
    } else {
      let n = st - 10
      if (n < 0) {
        n = 0
      }
      lasts = n
      bar.css('top', `${n}px`)
      barrotatio = (n) / (scrollbar.height() - bar.height())
      bal(barrotatio)
    }
  })
}

// scroll($body,$cont,$scrollbar,$bar)

$('.wrapper-bottom>.box').each(function (i, el) {
  scroll($('.wrapper-bottom>.box').eq(i))
})

let data = [3200, 3320, 2010, 2340, 2900, 3200, 3100, 3104, 3100, 3504, 3405, 3120, 3243, 2465, 3320, 2010, 2340, 2900, 3200, 2340, 2900, 3200, 3100, 3104, 3100, 3504]
/*攻击总数逐时统计图*/
let attackedByHouroption = {
  grid: {
    left: 60,
    right: 0,
    bottom: 10,
    top: 30
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11','12','13','14', '15','16','17','18', '19','20','21','22','23','24'],
      axisLabel: {
        color: '#d0dce7',
        fontSize: 16,
        padding: [15, 0, 0, 0]
      },
      axisLine: {
        lineStyle: {
          color: '#1d2250'
        }
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      splitLine: {
        show: false,
      },
      interval: 1000,
      axisLabel: {
        color: '#363d57',
        fontSize: 14,
        letterSpacing: 2,
        padding: [0, 10, 0, 0]
      },
      axisLine: {
        lineStyle: {
          show:false
        }
      }
    }
  ],
  series: [
    {
      name: '趋势图',
      type: 'line',
      stack: '总量',
      lineStyle: {
        normal: {
          color: '#3047aa',
          width: 3
        }
      },
      itemStyle: {
        normal: {
          color: '#196aba',
        },
      },
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgba(34,48,114,0.9)'
          }, {
            offset: 1,
            color: 'rgba(34,48,114,0.1)'
          }]),
        }
      },
      data: data,
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'line',
          label: {
            backgroundColor: 'rgba(0, 0, 0, 0.8)',
            formatter: function (params) {
              // 假设此轴的 type 为 'time'。
              return echarts.format.formatTime(params.value);
            },
            padding: [30, 20]
          },
          lineStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: '#4466f4' // 0% 处的颜色
              }, {
                offset: 1, color: '#1c2c5b' // 100% 处的颜色
              }],
              globalCoord: false // 缺省为 false
            },
            width: 3
          },
        },
      },
    },

  ]
};
var attackedByHourChart = echarts.init(document.getElementById('attack-line-chart'));
attackedByHourChart.setOption(attackedByHouroption);
setInterval(function () {
  data.shift()
  data.push(Math.random().toFixed(1) * 3000 + 1000)
  attackedByHourChart.setOption({
    series: [{
      data: data
    }]
  });
}, 1000)





